<template>
    <div class="home">
        <div class="left">
            <Usermenu></Usermenu>
        </div>
        <div class="right">
            <Header></Header>
            <Table></Table>
            <div class="right-in">
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, toRefs } from 'vue';
import { useRoute, useRouter } from "vue-router";
import { ToastStore } from '../store/toast';
import Header from "./mayLayOut/Header.vue";
import Usermenu from "./mayLayOut/Usermenu.vue";
import Table from "./mayLayOut/table.vue";

const Router = useRouter();
const Route = useRoute();

const toast = reactive(ToastStore())

</script>
 
<style lang = "less" scoped>
.home {
    display: flex;
    width: 100%;
    height: 100%;

    .left {
        width: 220px;
        background-color: #304156;
        color: #fff;
        box-shadow: 5px 0 5px #ccc;
    }

    .right {
        flex: 1;
        height: 100%;

        .right-in {
            width: calc(100vw - 220px);
            height: calc(100% - 126px);
            padding: 20px;
            overflow: auto;
        }
    }
}
</style>